<template>
  <div class="box">
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="content">
        <router-link :to="`/home/brand/detail?id=${item.id}`" class="list" v-for="item in list" :key="item.id">
          <img :src="item.app_list_pic_url" alt />
          <div class="info">
            <span>{{item.name}}</span>
            <span class="icon">|</span>
            <span>{{item.floor_price}}元起</span>
          </div>
        </router-link>
      </div>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/nav";
export default {
  data() {
    return {
      page: 1,
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      listaction({
        page: this.page
      }).then(res => {
        // console.log(res.data);
        // this.list = res.data;
        this.list.push(...res.data);
        this.page += 1;
        this.loading = false;
        if (res.total == this.page - 1) {
          this.finished = true;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.content {
  height: calc(100% - 1.24rem);
  overflow: auto;
  margin-top: 1.22667rem;
  border-top: 0.01333rem solid transparent;
  .list {
    display: inline-block;
    width: 10rem;
    height: 5.54667rem;
    position: relative;
    margin-bottom: 0.05333rem;
    img {
      width: 100%;
      height: 100%;
    }
    .info {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      span {
        color: #fff;
        font-size: 0.46667rem;
        font-weight: 700;
      }
      .icon {
        padding: 0 0.06667rem;
      }
    }
  }
}
</style>